<template>
  <div class="wrap">
    <p class="title">
      <span class="tip">{{ msg }}</span>
      <span class="path">{{ route.path }}</span>
    </p>
    <router-link to="/home">
      <el-button type="primary" size="small">back homepage</el-button>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const msg = ref("NotFound Pages");
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.wrap {
  padding: 10px;
  .title {
    .tip {
      font-weight: bold;
      color: $gray;
    }
    .path {
      color: $danger;
    }
  }
}
</style>
